<template>
	<view id="info">
		<view class="dataLine">
			<view class="label">合作商名称：</view>
			<view class="data">{{userinfo.company}}</view>
		</view>
		<view class="dataLine">
			<view class="label">法人姓名：</view>
			<view class="data">{{userinfo.legal}}</view>
		</view>
		<view class="dataLine">
			<view class="label">主要负责人：</view>
			<view class="data">{{userinfo.name}}</view>
		</view>
		<view class="dataLine">
			<view class="label">联系方式：</view>
			<view class="data">{{userinfo.mobile}}</view>
		</view>
		<view class="dataLine">
			<view class="label">邮箱：</view>
			<view class="data">{{userinfo.email}}</view>
		</view>
		
		<view class="dataLine">
			<view class="label">身份证照片：</view>
			<view class="data" style="display:flex;align-items: center;">
				<view style="width:200rpx;height:120rpx;margin:10rpx;position:relative;" v-if='cardZheng'>
					<image :src="cardZheng" style="width:100%;height:100%;border:1rpx solid #CCC;border-radius: 10rpx;" v-if='cardZheng' @click="showPic(1)"></image>
					<!-- <image src="../../static/my/card_a.png" style="width:100%;height:100%;border:1rpx solid #CCC;border-radius: 10rpx;" v-else @click='upload(1)'></image>
					<text class="iconfont icon-close" style="position:absolute;top:-12px;right:-5px;color:#009AFF;z-index:999;" v-if='cardZheng' @click.prevent="delImg(1)"></text> -->
				</view>
				
				<view style="width:200rpx;height:120rpx;margin:10rpx;position:relative;" v-if='cardFan'>
					<image :src="cardFan" style="width:100%;height:100%;border:1rpx solid #CCC;border-radius: 10rpx;" @click="showPic(2)"></image>
<!-- 					<image src="../../static/my/card_b.png" style="width:100%;height:100%;border:1rpx solid #CCC;border-radius: 10rpx;" v-else @click='upload(2)'></image>
					<text class="iconfont icon-close" style="position:absolute;top:-12px;right:-5px;color:#009AFF;z-index:999;" v-if='cardFan' @click.prevent="delImg(2)"></text> -->
				</view>
				
				
				
				<!-- <img :src="cardZheng" alt=""  @click="showPic(1)" v-if='cardZheng' />
				<text class="btns"  @click='upload(1)' v-else>上传身份证</text> -->
			</view>
		</view>
		
		<view class="dataLine">
			<view class="label">银行卡照片：</view>
			<view class="data" style="display:flex">
				<view style="width:200rpx;height:120rpx;margin:10rpx;position:relative;">
					<image :src="bankImg" style="width:100%;height:100%;border:1rpx solid #CCC;border-radius: 10rpx;" v-if='bankImg' @click="showPic(3)"></image>
					<!-- <image src="../../static/my/bank_a.png" style="width:100%;height:100%;border:1rpx solid #CCC;border-radius: 10rpx;" v-else @click='upload(3)'></image>
					<text class="iconfont icon-close" style="position:absolute;top:-12px;right:-5px;color:#009AFF;z-index:999;" v-if='bankImg' @click.prevent="delImg(3)"></text> -->
				</view>
			</view>
		</view>
		<view class="dataLine">
			<view class="label">持卡人：</view>
			<view class="data"><input type="text" :disabled="true" v-model="bankName" placeholder=""></view>
		</view>
		<view class="dataLine">
			<view class="label">身份证号：</view>
			<view class="data"><input type="text" :disabled="true" v-model="Identity" placeholder=""></view>
		</view>
		<view class="dataLine">
			<view class="label">身份证地址：</view>
			<view class="data"><input type="text" :disabled="true" v-model="idcartAddress" placeholder=""></view>
		</view>
		<view class="dataLine">
			<view class="label">开户行：</view>
			<view class="data"><input type="text" :disabled="true" v-model="bank" placeholder=""></view>
		</view>
		<view class="dataLine">
			<view class="label">银行卡号：</view>
			<view class="data"><input type="text" :disabled="true" v-model="bankCard" placeholder=""></view>
		</view>
		<view class="dataLine">
			<view class="label">预留手机号：</view>
			<view class="data"><input type="text" :disabled="true" v-model="bankMobile" placeholder=""></view>
		</view>
		
		<view v-if="userinfo.isCorporateAccount==1">
			<view style="padding:30rpx;">对公结算信息</view>
			<view class="dataLine">
				<view class="label">开户许可证：</view>
				<view class="data" style="display:flex">
					<view style="width:200rpx;height:120rpx;margin:10rpx;position:relative;">
						<image :src="bankImg1" style="width:100%;height:100%;border:1rpx solid #CCC;border-radius: 10rpx;" v-if='bankImg1' @click="showPic(4)"></image>
						<image src="../../static/my/bank_a.png" style="width:100%;height:100%;border:1rpx solid #CCC;border-radius: 10rpx;" v-else @click='upload(4)'></image>
						<text class="iconfont icon-close" style="position:absolute;top:-12px;right:-5px;color:#009AFF;z-index:999;" v-if='bankImg1' @click.prevent="delImg(4)"></text>
					</view>
				</view>
			</view>
			<view class="dataLine">
				<view class="label">持卡人：</view>
				<view class="data"><input type="text" :disabled="true" v-model="bankName1" placeholder=""></view>
			</view>
			<view class="dataLine">
				<view class="label">开户行：</view>
				<view class="data"><input type="text" :disabled="true" v-model="bank1" placeholder=""></view>
			</view>
			<view class="dataLine">
				<view class="label">银行卡号：</view>
				<view class="data"><input type="text" :disabled="true" v-model="bankCard1" placeholder=""></view>
			</view>
			<view class="dataLine">
				<view class="label">预留手机号：</view>
				<view class="data"><input type="text" :disabled="true" v-model="bankMobile1" placeholder=""></view>
			</view>
		</view>
		
		<view style="padding:10rpx 0;text-align:center;color:#FF0000;font-size:14px;">请仔细核对个人信息，以免影响分润发放</view>
		<view style="padding:15rpx">
			<view class="sureBtn disabled" v-if='userinfo.isConfirm == 2'>已确认</view>
			<view class="sureBtn" v-else @click='sureName()'>确认</view>
		</view>
		
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				userinfo:'',
				cardZheng:'',     //身份证正面照
				cardFan:'',      //身份证反面照
				bankImg:'',     //银行卡照片
				bankName:'',    //身份证名字、银行认证名字
				Identity: '',    //身份证号
				idcartAddress:'',//身份证地址
				bank:'',         //开户行
				bankCard:'',  //银行卡号
				bankMobile:'',  //银行预留手机
				ic: '',
				bankId:''       ,//银行id
				
				bank1:'',//开户行
				bankId1:'',//银行卡图片
				bankCard1:'',//银行卡号
				bankName1:'',//户名
				bankImg1:'',
				bankMobile1:'',//预留手机
			}
		},
		onLoad(option){
			this.getUserInfo()
		},
		methods: {
			delImg(i){
				if(i==1){
					this.cardZheng='';
					this.Identity=''
					this.idcartAddress=''
					
				}else if(i==2){
					this.cardFan='';
				}else if(i==3){
					this.bankImg=''
					this.bank=''
					this.bankCard=''
					this.bankId=''
				}else if(i==4){
					this.bankImg1=''
				}
			},
			getUserInfo(){
				this.httpClient.post('agents/app/agent/getUserInfoForApp', {}).then(res => {
					if(res.code==200){
						console.info(res.data)
						this.userinfo = res.data
						uni.setStorageSync("userinfo",res.data)
						//初始赋值
						//身份证正面照
						this.cardZheng=res.data.frontPhoto
						//身份证反面照
						this.cardFan=res.data.reversePhoto
						//身份证认证名字
						this.bank=res.data.bank
						//身份证号
						this.Identity=res.data.identity1
						//身份证地址
						this.idcartAddress=res.data.idcartaddress
						//银行卡照片
						this.bankImg=res.data.bankImg
						//开户行
						this.bank=res.data.bank
						//绑定手机号
						this.bankMobile=res.data.bankMobile
						//银行卡号
						this.bankCard=res.data.bankCard
						//bankId
						this.bankId=res.data.bankId
						//
						this.bankName=res.data.bankName
						this.bankName1=res.data.bankName1
						//银行卡照片
						this.bankImg1=res.data.bankImg1
						//开户行
						this.bank1=res.data.bank1
						//绑定手机号
						this.bankMobile1=res.data.bankMobile1
						//银行卡号
						this.bankCard1=res.data.bankCard1
						//bankId
						this.bankId1=res.data.bankId1
					}
				})
			},
			upload(i){
				let that = this
				let flag=''
				let url=''
				if(i==1){
					flag=1
					url='agents/app/agent/index/uploadAgentID'
				}else if(i==2){
					flag=2
					url='agents/app/agent/index/uploadAgentID'
				}else if(i==3){
					url='agents/app/agent/index/uploadBankcard'
				}else if(i==4){
					url='file/uploadImg'
					
				}
				uni.chooseImage({
					count: 1,
					sizeType: 'compressed',
					success: (chooseImageRes) => {
						let imgPath = chooseImageRes.tempFilePaths[0];
						this.httpClient.upload(url,{
							name: 'file',
							filePath: imgPath,
							flag:flag
						}).then(res=>{
							if(res.code==200){
								if(i==1){
									that.bankName=res.data.ocr.name    //身份证名，认证名
									that.idcartAddress = res.data.ocr.address   //身份证地址
									that.Identity = res.data.ocr.num    //身份证号
									that.cardZheng = res.data.src       //正面照片
									
									console.info(that.cardZheng)
								}else if(i==2){
									that.cardFan = res.data.src //反面照片
								}else if(i==3){
									if(res.data.code=="1"){
										that.bank=res.data.bank_name
										that.bankCard=res.data.no.replace(/\s*/g,'')
										//卡图片地址
										that.bankImg = res.data.url
										//id:
										that.bankId=res.data.bank_id
									}else{
										uni.showToast({
											title:res.data.msg,
											icon:'none'
										})
									}
								}else if(i==4){
									that.bankImg1=res.data.url
								}
							}
						})
						
					}
				})
			},
			showPic(i){
				let imgUrl=[]
				if(i==1){
					imgUrl=[this.cardZheng]
				}else if(i==2){
					imgUrl=[this.cardFan]
				}else if(i==3){
					imgUrl=[this.bankImg]
				}else if(i==4){
					imgUrl=[this.bankImg1]
				}
				uni.previewImage({
					urls: imgUrl,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				})
			},
			sureName(){
				uni.showToast({
					icon: 'none',
					title: '请联系业务经理变更信息！'
				})
				return
				if(!this.bankImg){
					uni.showToast({
						icon: 'none',
						title: '请上传银行卡！'
					})
					return
				}
				if(!this.cardZheng){
					uni.showToast({
						icon: 'none',
						title: '请上传身份证正面照片！'
					})
					return
				}
				if(!this.cardFan){
					uni.showToast({
						icon: 'none',
						title: '请上传身份证正面照片！'
					})
					return
				}
				if(!this.Identity){
					uni.showToast({
						icon: 'none',
						title: '未识别出身份信息！'
					})
					return
				}
				// if(this.userinfo.legal!=this.bank){
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '身份信息与预留信息不一致，请重新上传！'
				// 	})
				// 	return
				// }
				if(!this.bankMobile){
					uni.showToast({
						icon: 'none',
						title: '请填写银行预留手机号码！'
					})
					return
				}
				if(!this.bankCard){
					uni.showToast({
						icon: 'none',
						title: '未识别到银行卡号！'
					})
					return
				}
				
				this.httpClient.postJson('agents/app/agent/Agent/sureUserInfo',{
					identity1: this.Identity,//身份证号
					frontPhoto:this.cardZheng,//身份证正面照片
					reversePhoto:this.cardFan,//身份证反面照片
					idcartaddress:this.idcartAddress,//身份证地址
					
					bank:this.bank,//开户行
					bankId:this.bankId,//银行卡图片
					bankCard:this.bankCard,//银行卡号
					bankName:this.bankName,//户名
					bankImg:this.bankImg,
					bankMobile:this.bankMobile,//预留手机号
					
					bank1:this.bank1,//开户行
					bankId1:this.bankId1,//银行卡图片
					bankCard1:this.bankCard1,//银行卡号
					bankName1:this.bankName1,//户名
					bankImg1:this.bankImg1,
					bankMobile1:this.bankMobile1,//预留手机
					
					
					
				}).then(res=>{
					if(res.code==200){
						uni.showToast({
							icon: 'none',
							title: '操作成功，感谢您的配合！'
						})
						setTimeout(function() {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}, 1500)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	#info{
		font-size:26rpx;
		.dataLine{
			padding:20rpx;background:#FFF;margin-bottom:1rpx;display:flex;align-items: center;
			.label{
				width:250rpx;text-align:right;color:#888;
			}
			.data{
				flex:1;
				.btns{
					padding: 10rpx;
					background: #3aacff;
					color: #fff;
					font-size:24rpx;
					border-radius: 10rpx;
				}
				img{
					width:100rpx;height:60rpx;display:inline-block;border-radius: 5rpx;
				}
			}
		}
		.sureBtn{
		    background: #3aacff;
		    text-align: center;
		    color: #fff;
		    line-height: 80rpx;
		    border-radius: 20rpx;
			margin:30rpx;
		  }
		  .disabled{
			  background:#CCC;
		  }
	}
	
</style>
